<template>
  <div>
    <div>demo4</div>
    <div ref="container" id="container"></div>
  </div>
</template>

<script setup>
import * as THREE from "three";
import { onMounted, ref, onBeforeUnmount, reactive, onUnmounted } from "vue";
import { MMDLoader } from "three/examples/jsm/loaders/MMDLoader.js";

const container = ref(null);
let scene, camera, renderer, mesh;
let renderId = null;

// 相机位置的响应式数据
const cameraPosition = reactive({
  x: 0,
  y: 0,
  z: 75,
});

const init = () => {
  const width = window.innerWidth;
  const height = window.innerHeight;

  const helper = new MMDAnimationHelper();

  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(750, width / height, 1, 100);
  renderer = new THREE.WebGLRenderer({ alpha: true });

  renderer.setSize(width, height);
  container.value.appendChild(renderer.domElement);
  const light = new THREE.AmbientLight(0xaaaaaa);
  scene.add(light);

  const loader = new MMDLoader();

  camera.position.z = cameraPosition.z;

  loader.loadWithAnimation(
    "/qque/青雀（分桦）.pmx",
    "/move/xz.vmd",
    function (mmd) {
      mesh = mmd.mesh;
      helper.add(mesh, {
        animation: mmd.animation,
        // physics: true,
      });
    },
    undefined,
    undefined
  );
};

function animate() {
  renderId = requestAnimationFrame(animate);
  // controls.update();
}

onMounted(() => {
  /*  Ammo().then(() => {
    init();
  });*/
  init();
});
</script>

<style scoped>
#container {
  width: 100%;
  height: 100%;
}
</style>
